import Icon from '@/components/Icon'
import Input from '@/components/Input'
import NavBar from '@/components/NavBar'
import { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss'
import io from 'socket.io-client'
import { getTokenInfo } from '@/utils/storage'
import { getUser } from '@/store/actions/profile'

const Chat = () => {
  const history = useHistory()
  const [messageList, setMessageList] = useState([
    { type: 'robot', text: '尊敬的用户，您好，小艾诚挚为您服务' },
    { type: 'user', text: '你好' },
  ])
  const [msg, setMsg] = useState('')
  // 从redux中拿头像
  const photo = useSelector((state) => state.profile.user.photo)
  // 拿到io的client对象
  const clientRef = useRef(null)
  // 控制聊天滚动条
  const listRef = useRef(null)

  const dispatch = useDispatch()

  // 与socketio连接
  useEffect(() => {
    // 拿到用户信息，解决在聊天界面点击刷新时丢失用户头像的问题
    dispatch(getUser())
    // socket:io的连接对象
    // client.close()关闭连接
    // client.on() 监听事件
    // client.emit() 主动给服务器发信息
    const client = io('http://geek.itheima.net', {
      query: {
        token: getTokenInfo().token,
      },
      transports: ['websocket'],
    })

    clientRef.current = client
    // 连接服务器成功的事件
    client.on('connect', function () {
      // console.log('连接成功')
      setMessageList((messageList) => {
        return [...messageList, { type: 'robot', text: '有什么问题尽管问我' }]
      })
    })

    // 接收到服务器的事件
    client.on('message', function (e) {
      setMessageList((messageList) => {
        return [...messageList, { type: 'robot', text: e.msg }]
      })
    })
    return () => {
      // 组件销毁时，关闭与socket的连接
      client.close()
    }
  }, [dispatch])

  // 让聊天滚动条滚到最底部
  useEffect(() => {
    listRef.current.scrollTop =
      listRef.current.scrollHeight - listRef.current.offsetHeight
  }, [messageList])
  // 底部输入框enter按键弹起, 按下回车要做的事
  const keyUp = (e) => {
    if (e.keyCode !== 13) return
    if (!msg) return
    // 把用户的消息添加列表中
    setMessageList([
      ...messageList,
      {
        type: 'user',
        text: msg,
      },
    ])
    // 给服务器发送消息
    clientRef.current.emit('message', {
      msg,
      timestamp: Date.now(),
    })
    // 清空底部输入框消息
    setMsg('')
  }

  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className="fixed-header" onLeftClick={() => history.go(-1)}>
        菲菲
      </NavBar>

      {/* 聊天记录列表 */}
      {/* 机器人的消息 */}
      <div className="chat-list" ref={listRef}>
        {messageList.map((item, index) => {
          if (item.type === 'robot') {
            return (
              <div className="chat-item" key={index}>
                <Icon type="iconbtn_xiaozhitongxue" />
                <div className="message">{item.text}</div>
              </div>
            )
          } else {
            // 用户的消息
            return (
              <div className="chat-item user" key={index}>
                <img src={photo} alt="" />
                <div className="message">{item.text}</div>
              </div>
            )
          }
        })}
      </div>

      {/* 底部消息输入框 */}
      <div className="input-footer">
        <Input
          className="no-border"
          placeholder="请描述您的问题"
          value={msg}
          onChange={(e) => setMsg(e.target.value)}
          onKeyUp={keyUp}
        />
        <Icon type="iconbianji" />
      </div>
    </div>
  )
}

export default Chat
